<template>
  <div>  <div ref="charts1" style="width: 150px; height: 150px" />  <p class="charts_p">代取件</p></div>

</template>

<script>
import * as echarts from 'echarts'
import 'echarts-liquidfill'
require('echarts/lib/component/graphic')

export default {
  name: 'EchartS',
  props: {
    chartData: {
      type: Array,
      required: true }},
  watch: {
    chartData(newValue) {
      this.initChart()
    }
  },
  mounted() {
    const aa = echarts.init(this.$refs.charts1)
    aa.setOption({

      series: [
        {
          name: '图形表',
          type: 'liquidFill',
          data: this.chartData,
          // color: ['#999'],
          radius: '80%',
          label: {
            normal: {
              color: '#666', // 设置文本的轮廓颜色
              textStyle: {
                fontSize: 16 // 设置文本字体大小
              }
            }
          },
          style: {
            opacity: 0,
            stroke: 'transparent', // 设置圆圈颜色
            fill: 'transparent', // 设置填充色
            lineWidth: 2
          },
          color: ['#f85002'],
          backgroundStyle: {
            color: 'transparent', // 设置背景颜色为透明
            borderColor: 'transparent',
            shadowBlur: 0, // 设置背景阴影模糊程度为0
            shadowColor: 'transparent' // 设置背景阴影颜色为透明
          },
          // 添加波浪效果
          waveAnimation: true,
          waveAnimationDuration: 2000,
          waveAnimationEasing: 'linear',
          waveAnimationThreshold: 1
        }
      ]
    })
  }
}
</script>

<style scoped>

.charts_p{
  margin-left: 45px;
}
</style>
